<!DOCTYPE html>
<html>
<head>
<title>Presentation</title>
<meta charset='utf-8' />
<script src='slides.js'></script>
<link type="text/css" rel="stylesheet" href="css/scrollbar.css"/>
<link type="text/css" rel="stylesheet" href="css/curso.css"/>
</head>
<body style="display: none">
	
	<section class="slides layout-regular template-default">
      
		<!-- Your slides (<article>s) go here. Delete or comment out the slides below. -->
        
      	<article class="portada">
      		<header>
        		<h1>Curso de</h1>
        	</header>
        	<div class="logo-html">
        		<div>HTML</div>
				<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 512 512'>
					<path fill='#E34F26' d='M71,460 L30,0 481,0 440,460 255,512'/>
					<path fill='#EF652A' d='M256,472 L405,431 440,37 256,37'/>
					<path fill='#EBEBEB' d='M256,208 L181,208 176,150 256,150 256,94 114,94 129,265 256,265zM256,355 L192,338 188,293 132,293 139,382 256,414z'/>
					<path fill='#FFF' d='M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 387,208zM255,94 L255,150 392,150 397,94z'/>
				</svg>
      		</div>
      		<div class="logo-css">
      			<div>CSS</div>
				<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 512 512'>
					<path fill='#E34F26' d='M71,460 L30,0 481,0 440,460 255,512'/>
					<path fill='#EF652A' d='M256,472 L405,431 440,37 256,37'/>
					<path fill='#EBEBEB' d='M129,265 L256,265 256,208 124,208zM119,150 L256,150 256,94 114,94zM256,355 L132,322 139,382 256,414z'/>
					<path fill='#FFF' d='M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 397,94 255,94 255,150 336,150 330,208z'/>
				</svg>
      		</div>
      		<div class="logo-js">
      			<div>JS</div>
				<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 512 512'>
					<path fill='#E34F26' d='M71,460 L30,0 481,0 440,460 255,512'/>
					<path fill='#EF652A' d='M256,472 L405,431 440,37 256,37'/>
					<path fill='#EBEBEB' d='M256,150 L256,94 255,94 114,94 118,150zM256,355 L192,338 188,293 132,293 139,382 256,414z'/>
					<path fill='#FFF' d='M336,150 L318,338 255,355 255,414 371,382 397,94 255,94 255,150z'/>
				</svg>
      		</div>
      		<footer>
      			Adri&aacute;n Seijo - Septiempre/Octubre 2011
      		</footer>
      	</article>

		<article>
        	<h2>&lt;accesibiliad&gt;</h2>
		</article>
		
		<article>
        	<h3>Accesibilidad en la web</h3>
        	
        	<p>
        		La web, como medio informativo y como servicio debe ser accesible por todo el mundo, incluídas aquellas personas con discapacidades de cualqueir tipo.
        	</p>
        	<p>
        		La gente sorda, ciega, daltónica, disléxica, que no puede usar un ratón, gente mayor, .... Principalmente por causas visuales pero no exclusivamente.
        	</p>
			<p>
				Para ello la W3C crea la WAI (Web Accesibility Initiative) en 1997 que desarrolla uan serie de normativas para ganratizar la accesibilidad.
			</p>
			        	
			<p>
				Constan de 3 niveles, A, AA y AAA, de más permisisvo a menos permisivo. Actualmente hay una ley que obliga a usar AA en organismos públicos.
			</p>
			
			<p>
				Existen validadores de accesibilidad, <a href="http://www.tawdis.net/" target="_blank">TAW</a>, no confundir con la validación HTML o CSS.
			</p>
		</article>
		
		<article>
			<p>
				La gente con problemas de accesibilidad visualiza las webs principalemnte usando lectores de pantalla.
			</p>
			<p>
				El problema de los lectores es el escaso soporte a las nuevas tecnologías (difícil implementación) y una escasa actualización por aprte de los usuarios (los buenos no son gratis!).
			</p>
        	<p>
        		Para ver como es la web en un elctor de pantalla podemos usar un emulador como <a href="https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/">Fang emulator (Firefox plugin)</a>
        	</p>
		</article>

		<article>
        	<h2>&lt;html5&gt;</h2>
		</article>
		
		<article>
        	<h3>Estado actual</h3>
        	
        	<p>
        		Esatandar en evolución, no habrá HTML6!.
        	</p>
        	<p>
        		Ya se puede usar, s&oacute;lo hay que poner como doctype: &lt;!doctype html&gt;. Functiona en todos los navegadores!
        	</p>
        	<p>
        		También se puede usar &lt;meta charset="utf-8"/&gt; y suprimir el atributo type en los link y script (por defecto es css y js) en todos los navegadores.
        	</p>
		</article>
		
		<article>
        	<h3>La tecnología</h3>
        	
        	<p>
        		<strong>Semántica</strong> - Nuevas etiquetas, microformatos, RDF y microdata.
        	</p>
        	
        	<p>
        		<strong>Almacenamiento y offline</strong> - App Cache, Local Storage, Indexed DB y File API.
        	</p>
        	
        	<p>
        		<strong>Acceso al hardware</strong> - Geolocation API, cámara, agenda,...
        	</p>
        	
        	<p>
        		<strong>Conectividad</strong> - Web Sockets y Server-Sent Events.
        	</p>
        	
        	<p>
        		<strong>Multimedia</strong> - Video y audio.
        	</p>
        	<p>
        		<strong>Gráficos 2D/3D y efectos</strong> - SVG, Canvas, WebGL, CSS3.
        	</p>
        	<p>
        		<strong>Rendimiento e Integración</strong> - Web Workers, XMLHttpRequest 2.
        	</p>
        	<p>
        		<strong>CSS3</strong> - Fuentes personalizadas, bordes, sombras, degradados,...
        	</p>
		</article>
		
		<article>
        	<h3>Etiquetas y atritos</h3>
        	<h4>Etiquetas semánticas</h4>
        	<ul>
        		<li><strong>&lt;section&gt;</strong> - Secci&oacute;n dentro de una p&aacute;gina con un contenido en com&uacute;n y generalmente un t&iacute;tulo.</li>
        		<li><strong>&lt;nav&gt;</strong> - Enlaces a otras p&aacute;ginas, p.e. men&uacute; o paginaci&oacute;n.</li>
        		<li><strong>&lt;aside&gt;</strong> - Contenido relacionedo con la p&aacute;gina pero que forma una entidad separada</li>
        		<li><strong>&lt;header&gt;</strong> - Contenedor gen&eacute;rico para cabeceras, logos, etc.</li>
        		<li><strong>&lt;hgroup&gt;</strong> - Grupos de cabeceras cuando estas tienen varios h1-h6 (p.e. t&iacute;tulos con subt&iacute;tulos)</li>
        		<li><strong>&lt;footer&gt;</strong> - Pie de p&aacute;gina</li>
        	</ul>
        </article>
		
		<article>
			<ul>
				<li><strong>&lt;time&gt;</strong> - Representaci&oacute;n de tiempo, incluyendo ajustes horarios</li>
        		<li><strong>&lt;mark&gt;</strong> - Texto resaltado</li>
			</ul>
			<p>
				En IE8 y anteriores hay que recurrir a JS para que reconozca los nuevos tags. 
			</p>
			<p>
				<a href="http://diveintohtml5.info/semantics.html" target="_blank">Semantics en Dive into HTML5</a>
			</p>
		</article>
		
		<article>
        	<h4>Formularios</h4>
        	<p>Nuevos tipos de input</p>
        	<ul>
        		<li>email - <input type="email"/></li>
        		<li>url - <input type="url"/></li>
        		<li>number - <input type="number" min="0" max="5" step="1" value="3"/></li>
        		<li>range - <input type="range" min="0" max="100" step="1"/></li>
				<li>date - <input type="date"/></li>
				<li>search - <input type="search"/></li>
				<li>color - <input type="color"/></li>
        	</ul>
       </article>
       
       <article>
       		<p>Nuevos atributos</p>
        	<ul>
        		<li>placeholder="texto por defecto" - <input type="text" placeholder="texto por defecto"/></li>
        		<li>autofocus</li>
        	</ul>
        	<br/>
        	<p>Validaci&oacute;n</p>
       		<br/>
       		<form>
				<label for="obligatorio">Required</label> <input id="obligatorio" type="text" required/>
	        	<br/>
	        	<label for="email">Email</label> <input id="email" type="email" value="no_soy_un_email"/>
	        	<br/>
	        	<label for="url">URL</label> <input id="url" type="url" value="no_soy_una_url"/>
	        	<br/>
	        	<button type="submit">Probar</button>
        	</form>
        	<p>
        		novalidate - Evita la validación automática de los formularios
        	</p>
       </article>
       
       <article>
       		<h3>Gráficos 2D/3D y efectos</h3>
       		<h4>Canvas</h4>
       		<p>
       			<a href="http://spielzeugz.de/html5/liquid-particles.html" target="_blank">Ejemplo</a>
       		</p>
       		
       		<h4>WebGL</h4>
       		
       		<p>
       			<a href="http://madebyevan.com/webgl-water/" target="_blank">Ejemplo</a>
       		</p>
       </article>
       
       <article>
       		<h4>Efectos CSS3, transiciones</h4>
       		
       		<p>
       			<span class="texto-ejemplo">Texto de ejemplo</span>
       		</p>
       		<p class="transicion">
       			<span class="texto-ejemplo">Texto de ejemplo</span>
       		</p>
       		
       </article>
       <article>
       	<pre class="prettyprint lang-css">
texto-ejemplo {
	border: 1px dotted #999;
	display: inline-block;
	width: 300px;
}

.texto-ejemplo:hover {
	width: 600px;
}

.transicion .texto-ejemplo {
	-webkit-transition: all 500ms linear;
	-moz-transition: all 500ms linear;
	-o-transition: all 500ms linear;
	-ms-transition: all 500ms linear;
	transition: all 500ms linear;
}
   			</pre>	
       </article>
       
       <article>
       		<h3>Audio y video</h3>
       		<h4>Audio</h4>
       		<pre class="prettyprint lang-html">
&lt;audio id="audio_with_controls" controls=""&gt;
	&lt;source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" 
		type="audio/mpeg"/&gt;
	&lt;source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" 
		type="audio/ogg"/&gt;
&lt;/audio&gt;
       		</pre>
       		<p>
       			<audio id="audio_with_controls" controls="">
			        <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg"/>
					<source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" type="audio/ogg"/>
				</audio>
       		</p>
       </article>
       
       <article>
       		<h4>Video</h4>
       		<pre class="prettyprint lang-html">
&lt;video poster="http://www.html5rocks.com/en/tutorials/video/basics/star.png" controls=""&gt;
	&lt;source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;"/&gt;
	&lt;source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;"/&gt;
	&lt;source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;"/&gt;
&lt;/video&gt;
       		</pre>
       		<p>
       			<video poster="http://www.html5rocks.com/en/tutorials/video/basics/star.png" controls="" width="400">
			    	<source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;"/>
			    	<source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;"/>
			    	<source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;"/>
				</video>
       		</p>
       		<p>
       			<a href="http://craftymind.com/factory/html5video/CanvasVideo.html">Ejemplo remix</a>
       		</p>
       </article>
       
       <article>
       		<h4>CSS3</h4>
       		
       		<p>
       			Más selectores <a href="http://www.google.es/url?sa=t&source=web&cd=1&sqi=2&ved=0CB8QFjAA&url=http%3A%2F%2Fwww.quirksmode.org%2Fcss%2Fcontents.html&rct=j&q=quirksmode%20css3%20selectors&ei=c6icTsrLBo_04QSHm_XkCQ&usg=AFQjCNF7JJiHqA9sEBSyRGuoUf6EAKB3dw&cad=rja" target="_blank">Quirksmode</a>
       		</p>
       		<p>
       			<a href="http://css3please.com/" target="_blank">CSS3 please!</a>
       		</p>
       </article>
	</section>
</body>
</html>